<template>
  <div class="tabBar">
    <!-- 底部 star  -->
    <nav class="tarbar">
      <router-link class="item home" tag="div" to="/home">
        <i class="iconfont icon-dingwei"></i>
        <p>周边游</p>
      </router-link>

      <router-link class="item destination" tag="div" to="/destination">
        <i class="iconfont icon-dingwei1"></i>
        <p>目的地</p>
      </router-link>

      <router-link class="item TimeLimit" tag="div" to="/TimeLimit">
        <i class="iconfont icon-shizhongnaolingjishixianshi2"></i>
        <p>限时抢</p>
      </router-link>

      <router-link class="item my" tag="div" to="/my">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </router-link>
    </nav>
    <!-- 底部 end  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.tabBar{
    height: 52px;
    .tarbar{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        box-shadow: 0 3px 14px 2px rgb(0 0 0 / 12%);
        display: flex;
        .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            width: calc(100% / 4);
            height: 52px;
            color: #999;
            .iconfont {
                font-size: 24px;
            }
            p{
                font-size: 12px;
            }
            &.router-link-active{
                    color: #ff6600;
            }
            &.router-link-exact-active{
                    color: #ff6600;
            }
        }
    }
}
</style>